<!-- 保养、维修、年检、借出费 -->
<template>
  <template v-if="queryParams.isFilter">
    <div v-if="!filterShow" class="flex justify-end mb-5">
      <a-button type="primary" @click="handleFilter">
        查看符合筛选条件下所有车辆的{{ queryParams.feeCategory == 9 ? '借出费' : feeName }}
      </a-button>
    </div>
    <list-searcher v-if="filterShow" :searchList="searchList" v-model:searchForm="queryParams" @loadData="handleSubmit" />
  </template>
  <table-index :table="table" :rowKey="`id`" @loadData="loadData">
    <template #time="{ record }">
      <div v-if="record.startTime || record.endTime">
        <div v-if="record.startTime">{{ record.startTime }}</div>
        <div v-if="record.endTime">{{ record.endTime }}</div>
      </div>
      <div v-else> - </div>
    </template>
    <template #businessCode="{ record }">
      <a-link v-if="record.businessCode" type="link" @click="() => handleBusinessCodeClick(record)">
        {{ record.businessCode }}
      </a-link>
      <div v-else> - </div>
    </template>
    <template #orderCode="{ record }">
      <a-link v-if="record.orderCode" type="link" @click="() => handleOrderCodeClick(record)">{{ record.orderCode }}</a-link>
      <div v-else> - </div>
    </template>
    <template #feeName="{ record }">
      <div v-for="(it, index) in record.feeList" :key="index">
        <span v-if="!it.feeName" style="margin-right: 8px"> {{ it.amount }} </span>
        <span v-else style="margin-right: 8px"> {{ it.feeName }}：{{ it.amount }} </span>
        <a-tag :color="handleTagColor(it.feeStatus)" size="small"> {{ it.feeStatusName }} </a-tag>
      </div>
    </template>
  </table-index>
</template>

<script setup name="carmodal" lang="ts">
  // 支持保养、年检、维修、借出
  import { inject, onMounted, ref, computed, reactive } from 'vue'
  import { getAssetFeeDetailList } from '@/api/dashboard/vehicleAccounting.ts'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import useNavigate from '@/hooks/useNavigate'
  import { repairDetail } from '@/api/asset/repair' // 维修
  import { getCarTransferDetail } from '@/api/asset/carTransfer' // 车辆借出
  import { getShortOrdrDetails } from '@/api/order/sOrder' // 短租详情
  import { getLongOrderDetails } from '@/api/order/czsOrder' // 长租详情
  import { navigate2permission, navigate2orderDetail } from '../../../utils'

  const { navigateTo } = useNavigate()

  //查询条件
  const modalStatus = inject<any>('modalStatus')
  const closeModal = inject<any>('closeModal')

  const filterShow = ref(false)

  const fee_configs: any = {
    6: {
      feeName: '保养费',
      businessCode: '保养单号',
    }, // ✅
    7: {
      feeName: '维修费',
      businessCode: '维修单号',
    }, // ✅
    8: {
      feeName: '年检费',
      businessCode: '年检单号',
    }, // ✅
    9: {
      feeName: '借调费(借出)',
      businessCode: '借调单号',
    }, // ✅
  }

  const parentQueryParam = computed(() => modalStatus.queryParams)
  const feeName = fee_configs[parentQueryParam.value.feeCategory].feeName
  const businessCode = fee_configs[parentQueryParam.value.feeCategory].businessCode
  const queryParams = reactive<any>({
    carId: parentQueryParam.value.carId,
    licenseNoLike: parentQueryParam.value.licenseNo,
    orgIdList: parentQueryParam.value.orgIdList,
    startTime: parentQueryParam.value.startTime,
    endTime: parentQueryParam.value.endTime,
    profitFlag: parentQueryParam.value.profitFlag,
    feeCategory: parentQueryParam.value.feeCategory,
    isFilter: parentQueryParam.value.isFilter,
  })

  const handleTagColor = (feeStatus: number) => {
    switch (feeStatus) {
      case 0:
      case 3:
        return 'orangered'
      case 1:
      case 2:
        return 'green'
      default:
        return 'gray'
    }
  }

  const searchList = [
    {
      label: '车牌号',
      prop: 'licenseNo',
      type: 'a-input',
    },
  ]

  const columns = computed(() => {
    const result = [
      { title: '车牌号', dataIndex: 'licenseNo' },
      { title: '费用产生门店', dataIndex: 'orgName' },
      { title: '所选时间', dataIndex: 'time', slotName: 'time', width: 110 },
      { title: businessCode, dataIndex: 'businessCode', slotName: 'businessCode', width: 170 },
      { title: feeName, dataIndex: 'feeName', unit: '元', slotName: 'feeName', width: 220 },
    ]
    if (queryParams.feeCategory != 9) {
      // result.push({ title: '关联订单号', dataIndex: 'orderCode', slotName: 'orderCode', width: 240 })
      result.splice(4, 0, { title: '关联订单号', dataIndex: 'orderCode', slotName: 'orderCode', width: 240 })
    }

    return result
  })

  // 待处理 - table 配置
  const table = useTable({
    tableHeight: 'calc(76vh - 120px)',
    columns: columns.value,
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParams, getAssetFeeDetailList)

  onMounted(() => {
    loadData()
  })

  // 根据 feeCategory 获取对应的api
  const getApi = (record: any) => {
    switch (record.feeCategory) {
      case 7:
        return repairDetail
      case 9:
        return getCarTransferDetail
      default:
        return null
    }
  }
  // 获取保养、维修、年检、借出详情
  const getDetail = async (record: any) => {
    const api = getApi(record)
    const res = api ? await api({ id: record.businessId }) : { result: record }
    const { id, status, licenseNo, carId, type, carCode } = res.result

    if (record.feeCategory == 6) {
      navigate2permission('carManageDetail', { tabName: licenseNo, carId, form: 'car-manage', tab: 3 }, navigateTo, closeModal)
    } else if (record.feeCategory == 7) {
      navigate2permission('carRepairDetail', { tabName: licenseNo, id, status }, navigateTo, closeModal)
    } else if (record.feeCategory == 8) {
      navigate2permission('carManageDetail', { tabName: licenseNo, carId, form: 'car-manage', tab: 6 }, navigateTo, closeModal)
    } else if (record.feeCategory == 9) {
      navigate2permission('carBorrowDetail', { tabName: licenseNo, id, carId, type, carCode }, navigateTo, closeModal)
    }
  }
  // 点击保养、维修、年检、借出单号
  const handleBusinessCodeClick = (record: any) => {
    getDetail(record)
  }

  // 根据 orderType 获取对应的 api
  const getOrderApi = (record: any) => {
    if (record.orderType == 1) {
      return getShortOrdrDetails
    } else {
      return getLongOrderDetails
    }
  }
  // 获取订单详情
  const getOrderDetail = async (record: any) => {
    const api = getOrderApi(record)
    const res = await api({ id: record.orderId })
    const { id, carId, orderStatus } = res.result.orderInfo

    navigate2orderDetail({ id, carId, orderCode: record.orderCode, orderStatus, orderType: record.orderType }, navigateTo, closeModal)
  }
  // 点击关联订单号
  const handleOrderCodeClick = (record: any) => {
    getOrderDetail(record)
  }

  const handleFilter = () => {
    filterShow.value = true
    queryParams.carId = null
    loadData()
  }

  const handleSubmit = () => {
    queryParams.licenseNoLike = queryParams.licenseNo
    loadData()
  }
</script>

<style lang="less" scoped>
  .car-msg {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .car-msg-left {
    margin-right: 10px;
  }
  .col-lic {
    color: #1d2129;
    font-size: 14px;
    font-weight: 600;
    margin-right: 16px;
  }
  .button-border {
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    padding: 0 7px;
    border: 1px solid #1890ff;
    color: #1890ff;
    font-size: 12px;
    word-break: keep-all;
  }
  .operate-button {
    width: 56px;
    display: inline-flex;
    align-items: center;
    line-height: 1.5715;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0, 0, 1, 1);
    user-select: none;
    height: 32px;
    font-size: 14px;
    border-radius: var(--border-radius-small);
    color: rgb(var(--primary-6));
  }
</style>
